<script setup lang="ts">
import { CaretBottom, CaretTop } from '@element-plus/icons-vue';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { asyncranking, asyncselectquestion, asyncselectquestionbank } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH } from '../../../util/time';
const svg = ['#icon-rank_1', '#icon-rank_2', '#icon-rank_3']
const prop = defineProps<{ formdata: { teamid?: number, userid?: number, formdate: Date, todate: Date }, teamusers: Studycodemodel.Iteamuser[], data: Studycodemodel.Iteam }>()

const route = useRoute()

const questionid = computed(() => {
    return Number(route.query.questionid) || undefined
})

type I_teamdata = {
    // 用户id
    ID?: number,
    // 用名称
    name?: string,
    // 用户ac数量
    ACcount?: number,
    // 用户ac数量
    resultdataarraclength?: number,
    resultdataarrlength?: number,
    resultdatacount?: number,
    headportrait?: string,
    createdAt?: Date,
    resultdataarrmax?: number,
    count: number,
    countlength: number
    distinctquestionid: number
}

const _teamdata = ref<I_teamdata[]>([])

const questionbankid = computed(() => {
    return Number(route.query.questionbankid) || undefined
})

const key = ref<keyof I_teamdata>('resultdataarrmax')

const teamdata = computed(() => {
    return _teamdata.value.sort((a, b) => {
        if (desc.value) {
            return Number(a[key.value] || 0) - Number(b[key.value] || 0)
        }
        return Number(b[key.value] || 0) - Number(a[key.value] || 0)
    })
})

const desc = ref(false)

const isquestion = ref(1)
const loading = ref(false)
async function start() {
    if (prop.formdata.teamid) {
        loading.value = true
        try {
            const t = await asyncranking({ ...prop.formdata, questionid: questionid.value, questionbankid: questionbankid.value })
            _teamdata.value = t.ACrank.map(e => {
                const user = t.user.find(z => z.ID === e.userid)
                return {
                    ...user,
                    ACcount: e.count,
                    ...e,
                    createdAt: new Date(e.createdAt).getTime()
                }
            })
        } catch (e) {
            // ElMessage.error('没有查询')
        }
        loading.value = false
        isquestion.value = radio1.value
    }
}

const router = useRouter()

const radio1 = ref(1)

const number1 = ref()

const options = ref<Studycodemodel.Iquestion[] | Studycodemodel.Iquestionbank[]>([])

onMounted(() => {
    number1.value = questionid.value || questionbankid.value
    if (questionbankid.value) {
        radio1.value = 2
    }
    start()
})

async function push() {
    if (radio1.value === 1) {
        await router.push({ query: { questionid: number1.value } })
    } else {
        await router.push({ query: { questionbankid: number1.value } })
    }
    start()
}

async function remoteMethod(query: string, cb: (arg: any) => void) {
    if (query) {
        const obj: any = {
            _limit: 40
        }
        if (Number(query) == query) {
            obj._like = ['ID', Number(query)]
        } else {
            obj._like = ['name', query]
        }
        if (radio1.value === 1) {
            const { rows } = await asyncselectquestion(obj)
            cb(rows.map(e => {
                return {
                    value: e.ID,
                    label: e.name
                }
            }))
        } else {
            const { rows } = await asyncselectquestionbank(obj)
            cb(rows.map(e => {
                return {
                    value: e.ID,
                    label: e.name
                }
            }))
        }
    } else {
        cb([])
    }
}

</script>

<template>
    <div>
        <div class="row">
            <div class="col">
                <el-form size="default" :inline="true" class="tm">
                    <el-form-item>
                        <el-radio-group v-model="radio1" class="ml-4">
                            <el-radio :label="1">题目ID</el-radio>
                            <el-radio :label="2">题单ID</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="text-right">
                        <el-autocomplete v-model="number1" :fetch-suggestions="remoteMethod"
                            :placeholder="`请输入${radio1 === 1 ? '题目' : '题单'}ID或名称`">
                            <template #default="{ item }">
                                <div class="value">{{ item.value }} {{ item.label }}</div>

                            </template>
                        </el-autocomplete>
                    </el-form-item>

                    <el-form-item class="text-right">
                        <el-button type="primary" @click="push">查询</el-button>
                        <!-- <el-button type="primary" @click="() => download()">下载</el-button>
                    <el-button type="primary" @click="() => download(true)">下载全部</el-button> -->
                    </el-form-item>
                    <!-- <el-row>
                    <el-col :span="12">
                        <el-form-item label="总条数:">{{ count1 }} &nbsp;（不含非代码题）&nbsp;&nbsp;</el-form-item>
                    </el-col>
                    <el-col :span="12" class="text-right">
                        <el-form-item class="core">
                            <router-link v-slot="{ href }" :custom="true"
                                :to="{ name: 'logs', query: { teamid: data.ID } }">
                                <a class="core" v-show="isAdmin" :href="href" target="_bank">查看成员行为数据</a>
                            </router-link>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                </el-form>
            </div>
        </div>
        <div class="row" v-if="teamdata.length">
            <div class="col" v-loading="loading">
                <div class="rankmain">
                    <div class="runh row">
                        <div class="runh1">排名</div>
                        <!-- <div class="col"></div> -->
                        <div class="runh2 col">用户名</div>

                        <div v-show="isquestion === 2" @click="key = 'distinctquestionid'; desc = !desc"
                            class="runh4 cu">
                            题单评测题目数
                            <el-icon :class="key === 'distinctquestionid' ? 'dian' : ''">
                                <CaretBottom v-show="key === 'distinctquestionid' && desc === false" />
                                <CaretTop v-show="key === 'distinctquestionid' && desc === true" />
                            </el-icon>
                        </div>
                        <div v-show="isquestion === 2" @click="key = 'resultdatacount'; desc = !desc" class="runh4 cu">
                            题单题目全AC次数
                            <el-icon :class="key === 'resultdatacount' ? 'dian' : ''">
                                <CaretBottom v-show="key === 'resultdatacount' && desc === false" />
                                <CaretTop v-show="key === 'resultdatacount' && desc === true" />
                            </el-icon>
                        </div>
                        <div v-show="isquestion === 2" @click="key = 'count'; desc = !desc" class="runh3 cu">
                            题单题目全AC题数
                            <el-icon :class="key === 'count' ? 'dian' : ''">
                                <CaretBottom v-show="key === 'count' && desc === false" />
                                <CaretTop v-show="key === 'count' && desc === true" />
                            </el-icon>
                        </div>
                        <div @click="key = 'resultdataarrmax'; desc = !desc" class="runh3 cu">
                            题{{ isquestion === 1 ? '目' : '单' }}AC测试点数
                            <el-icon :class="key === 'resultdataarrmax' ? 'dian' : ''">
                                <CaretBottom v-show="key === 'resultdataarrmax' && desc === false" />
                                <CaretTop v-show="key === 'resultdataarrmax' && desc === true" />
                            </el-icon>
                        </div>
                        <div v-show="isquestion === 1" @click="key = 'countlength'; desc = !desc" class="runh4 cu">提交次数
                            <el-icon :class="key === 'countlength' ? 'dian' : ''">
                                <CaretBottom v-show="key === 'countlength' && desc === false" />
                                <CaretTop v-show="key === 'countlength' && desc === true" />
                            </el-icon>
                        </div>
                        <div class="runh4 cu" @click="key = 'createdAt'; desc = !desc">最近提交时间
                            <el-icon :class="key === 'createdAt' ? 'dian' : ''">
                                <CaretBottom v-show="key === 'createdAt' && desc === false" />
                                <CaretTop v-show="key === 'createdAt' && desc === true" />
                            </el-icon>
                        </div>
                    </div>
                    <hr />
                    <router-link v-for="(d, k ) in teamdata" :key="d.ID" class="runkitem row"
                        :to="{ name: '成员数据统计', query: { userid: d.ID } }">
                        <div class="runh1">
                            <strong>#{{ k + 1 }}</strong>
                        </div>
                        <div class="runh2 col">
                            {{ d.name }}
                        </div>
                        <div v-show="isquestion === 2" class="runh4">{{ d.distinctquestionid || 0 }}</div>
                        <div class="runh3" v-show="isquestion === 2">{{ d.resultdatacount || 0 }}</div>
                        <div class="runh3" v-show="isquestion === 2">{{ d.count || 0 }}</div>
                        <div class="runh3">{{ d.resultdataarrmax || 0 }}</div>
                        <!-- <div v-show="isquestion === 2" class="runh4">{{ d.count || 0 }}</div> -->
                        <div v-show="isquestion === 1" class="runh4">{{ d.countlength }}</div>
                        <div class="runh4">{{ TimeYH(d.createdAt) }}</div>
                    </router-link>
                </div>
            </div>
        </div>
        <el-empty v-if="!teamdata.length" image="https://cdn.hterobot.com/JOY/oj_1_1/Not%20Found%20illustration.png" />

    </div>

</template>


<style scoped>
.rankmain {
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 75px;
}

.runh div {
    display: inline-block;
    font-weight: bold;
}

.runh1 {
    width: 70px;
    padding-left: 24px;
}

.dian {
    color: var(--color-cheng);
}

.runh2 {
    width: 178px;
    overflow: hidden;
    height: 60px;
}


.runkitem:hover {
    text-decoration: none;
    color: var(--color-cheng);
}

.runh3 {
    width: 178px;
    text-align: right;
}

.runh4 {
    width: 200px;
    text-align: right;
}

.runkitem {
    background: #f5f5f5;
    border-radius: 4px;
    height: 60px;
    line-height: 60px;
    margin-bottom: 6px;
    text-decoration: none;
    color: var(--color-43);
}
</style>
